<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员后台 - 程序猿4399</title>
    <style>
        /* 基础样式 */
        body {
            margin: 0;
            font-family: 'Segoe UI', 'PingFang SC', Arial, sans-serif;
            background: #f4f6fa;
            color: #333;
        }

        /* 导航栏样式 */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #222e3c;
            padding: 0 24px;
            height: 56px;
            color: #fff;
        }

        .navbar .logo {
            font-size: 1.4em;
            font-weight: bold;
            letter-spacing: 2px;
        }

        .navbar ul {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .navbar li {
            margin: 0 12px;
        }

        .navbar a {
            color: #fff;
            text-decoration: none;
            font-size: 1em;
            padding: 8px 12px;
            border-radius: 4px;
            transition: background 0.2s;
        }

        .navbar a:hover, .navbar a.active {
            background: #3a4a5d;
        }

        /* 主要内容区域 */
        .main-content {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }

        /* 页面标题 */
        .page-title {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .page-title h1 {
            margin: 0;
            color: #222e3c;
        }

        /* 标签页切换 */
        .tabs {
            display: flex;
            background: #fff;
            border-radius: 8px 8px 0 0;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .tab {
            flex: 1;
            padding: 15px 20px;
            background: #f8f9fa;
            border: none;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s;
        }

        .tab.active {
            background: #fff;
            color: #2e8bff;
            border-bottom: 3px solid #2e8bff;
        }

        .tab:hover:not(.active) {
            background: #e9ecef;
        }

        /* 内容区域 */
        .tab-content {
            background: #fff;
            padding: 20px;
            border-radius: 0 0 8px 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            min-height: 400px;
        }

        .tab-pane {
            display: none;
        }

        .tab-pane.active {
            display: block;
        }

        /* 卡片样式 */
        .card {
            background: #fff;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e9ecef;
        }

        .card-title {
            font-size: 18px;
            font-weight: 600;
            color: #222e3c;
        }

        .card-meta {
            font-size: 14px;
            color: #6c757d;
        }

        .card-content {
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        /* 按钮样式 */
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin-right: 8px;
            transition: all 0.2s;
        }

        .btn-primary {
            background: #2e8bff;
            color: #fff;
        }

        .btn-primary:hover {
            background: #1766c2;
        }

        .btn-success {
            background: #28a745;
            color: #fff;
        }

        .btn-success:hover {
            background: #1e7e34;
        }

        .btn-danger {
            background: #dc3545;
            color: #fff;
        }

        .btn-danger:hover {
            background: #c82333;
        }

        .btn-warning {
            background: #ffc107;
            color: #212529;
        }

        .btn-warning:hover {
            background: #e0a800;
        }

        /* 搜索框 */
        .search-box {
            margin-bottom: 20px;
        }

        .search-input {
            width: 100%;
            max-width: 400px;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }

        .search-input:focus {
            outline: none;
            border-color: #2e8bff;
            box-shadow: 0 0 0 2px rgba(46, 139, 255, 0.2);
        }

        /* 统计信息 */
        .stats {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .stat-card {
            flex: 1;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .stat-number {
            font-size: 2em;
            font-weight: bold;
            color: #2e8bff;
        }

        .stat-label {
            color: #6c757d;
            margin-top: 5px;
        }

        /* 编辑模态框 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }

        .modal-content {
            background-color: #fff;
            margin: 10% auto;
            padding: 20px;
            border-radius: 8px;
            width: 80%;
            max-width: 500px;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .close {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover {
            color: #000;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
        }

        .form-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }

        .form-textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            min-height: 100px;
            resize: vertical;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                height: auto;
                padding: 10px 24px;
            }

            .navbar ul {
                flex-direction: column;
                width: 100%;
            }

            .navbar li {
                margin: 5px 0;
            }

            .tabs {
                flex-direction: column;
            }

            .stats {
                flex-direction: column;
            }

            .card-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .btn {
                margin-bottom: 5px;
            }
        }

        /* 加载状态 */
        .loading {
            text-align: center;
            padding: 40px;
            color: #6c757d;
        }

        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 40px;
            color: #6c757d;
        }

        .empty-state h3 {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="logo">程序猿4399 - 管理后台</div>
        <ul>
            <li><a href="index_two.html">返回首页</a></li>
            <li><a href="heimingdan.html">黑名单页面</a></li>
        </ul>
    </nav>

    <!-- 主要内容区域 -->
    <div class="main-content">
        <!-- 页面标题 -->
        <div class="page-title">
            <h1>黑名单内容管理</h1>
            <p>在这里可以审核用户提交的黑名单内容，管理已通过的内容</p>
        </div>

        <!-- 统计信息 -->
        <div class="stats">
            <div class="stat-card">
                <div class="stat-number" id="pending-count">0</div>
                <div class="stat-label">待审核</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="approved-count">0</div>
                <div class="stat-label">已通过</div>
            </div>
        </div>

        <!-- 标签页切换 -->
        <div class="tabs">
            <button class="tab active" onclick="switchTab('pending')">待审核内容</button>
            <button class="tab" onclick="switchTab('approved')">已通过内容</button>
        </div>

        <!-- 待审核内容标签页 -->
        <div class="tab-content">
            <div id="pending-tab" class="tab-pane active">
                <div class="search-box">
                    <input type="text" class="search-input" id="pending-search" placeholder="搜索待审核内容..." onkeyup="searchPending()">
                </div>
                <div id="pending-list">
                    <div class="loading">加载中...</div>
                </div>
            </div>

            <!-- 已通过内容标签页 -->
            <div id="approved-tab" class="tab-pane">
                <div class="search-box">
                    <input type="text" class="search-input" id="approved-search" placeholder="搜索已通过内容..." onkeyup="searchApproved()">
                </div>
                <div id="approved-list">
                    <div class="loading">加载中...</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑模态框 -->
    <div id="editModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>编辑内容</h3>
                <span class="close" onclick="closeEditModal()">&times;</span>
            </div>
            <form id="editForm">
                <div class="form-group">
                    <label class="form-label">内容：</label>
                    <textarea class="form-textarea" id="editContent" required></textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">管理员备注：</label>
                    <textarea class="form-textarea" id="editAdminNote" placeholder="可选"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">保存</button>
                <button type="button" class="btn btn-danger" onclick="closeEditModal()">取消</button>
            </form>
        </div>
    </div>

    <script>
        // 全局变量
        let currentData = { pending: [], approved: [] };
        let currentEditId = null;

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            loadData();
        });

        // 切换标签页
        function switchTab(tabName) {
            // 更新标签页按钮状态
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            event.target.classList.add('active');

            // 更新内容区域
            document.querySelectorAll('.tab-pane').forEach(pane => {
                pane.classList.remove('active');
            });
            document.getElementById(tabName + '-tab').classList.add('active');

            // 重新渲染对应内容
            if (tabName === 'pending') {
                renderPendingList(currentData.pending);
            } else {
                renderApprovedList(currentData.approved);
            }
        }

        // 加载数据
        async function loadData() {
            try {
                const response = await fetch('/api/blacklist');
                const result = await response.json();
                
                if (result.success) {
                    currentData = result.data;
                    updateStats();
                    renderPendingList(currentData.pending);
                    renderApprovedList(currentData.approved);
                } else {
                    alert('加载数据失败：' + result.message);
                }
            } catch (error) {
                console.error('加载数据失败:', error);
                alert('加载数据失败，请检查网络连接');
            }
        }

        // 更新统计信息
        function updateStats() {
            document.getElementById('pending-count').textContent = currentData.pending.length;
            document.getElementById('approved-count').textContent = currentData.approved.length;
        }

        // 渲染待审核列表
        function renderPendingList(items) {
            const container = document.getElementById('pending-list');
            
            if (items.length === 0) {
                container.innerHTML = '<div class="empty-state"><h3>暂无待审核内容</h3><p>所有内容都已审核完毕</p></div>';
                return;
            }

            container.innerHTML = items.map(item => `
                <div class="card">
                    <div class="card-header">
                        <div>
                            <div class="card-title">提交者：${item.submitter}</div>
                            <div class="card-meta">提交时间：${formatTime(item.submitTime)}</div>
                        </div>
                        <div>
                            <button class="btn btn-success" onclick="reviewItem('${item.id}', 'approve')">通过</button>
                            <button class="btn btn-danger" onclick="reviewItem('${item.id}', 'reject')">拒绝</button>
                            <button class="btn btn-warning" onclick="editItem('${item.id}')">编辑</button>
                        </div>
                    </div>
                    <div class="card-content">${item.content}</div>
                </div>
            `).join('');
        }

        // 渲染已通过列表
        function renderApprovedList(items) {
            const container = document.getElementById('approved-list');
            
            if (items.length === 0) {
                container.innerHTML = '<div class="empty-state"><h3>暂无已通过内容</h3><p>还没有审核通过的内容</p></div>';
                return;
            }

            container.innerHTML = items.map(item => `
                <div class="card">
                    <div class="card-header">
                        <div>
                            <div class="card-title">提交者：${item.submitter}</div>
                            <div class="card-meta">
                                提交时间：${formatTime(item.submitTime)} | 
                                审核时间：${formatTime(item.reviewTime)}
                                ${item.adminNote ? ' | 备注：' + item.adminNote : ''}
                            </div>
                        </div>
                        <div>
                            <button class="btn btn-warning" onclick="editItem('${item.id}')">编辑</button>
                            <button class="btn btn-danger" onclick="deleteItem('${item.id}')">删除</button>
                        </div>
                    </div>
                    <div class="card-content">${item.content}</div>
                </div>
            `).join('');
        }

        // 审核内容
        async function reviewItem(id, action) {
            const adminNote = prompt('请输入审核备注（可选）：');
            
            try {
                const response = await fetch('/api/blacklist/review', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        id: id,
                        action: action,
                        adminNote: adminNote
                    })
                });

                const result = await response.json();
                
                if (result.success) {
                    alert(result.message);
                    loadData(); // 重新加载数据
                } else {
                    alert('操作失败：' + result.message);
                }
            } catch (error) {
                console.error('审核失败:', error);
                alert('审核失败，请检查网络连接');
            }
        }

        // 编辑内容
        function editItem(id) {
            const item = currentData.pending.find(item => item.id === id) || 
                        currentData.approved.find(item => item.id === id);
            
            if (item) {
                currentEditId = id;
                document.getElementById('editContent').value = item.content;
                document.getElementById('editAdminNote').value = item.adminNote || '';
                document.getElementById('editModal').style.display = 'block';
            }
        }

        // 关闭编辑模态框
        function closeEditModal() {
            document.getElementById('editModal').style.display = 'none';
            currentEditId = null;
            document.getElementById('editForm').reset();
        }

        // 保存编辑
        document.getElementById('editForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const content = document.getElementById('editContent').value.trim();
            if (!content) {
                alert('内容不能为空');
                return;
            }

            try {
                const response = await fetch(`/api/blacklist/edit/${currentEditId}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        content: content
                    })
                });

                const result = await response.json();
                
                if (result.success) {
                    alert('编辑成功');
                    closeEditModal();
                    loadData(); // 重新加载数据
                } else {
                    alert('编辑失败：' + result.message);
                }
            } catch (error) {
                console.error('编辑失败:', error);
                alert('编辑失败，请检查网络连接');
            }
        });

        // 删除内容
        async function deleteItem(id) {
            if (!confirm('确定要删除这条内容吗？')) {
                return;
            }

            try {
                const response = await fetch(`/api/blacklist/${id}`, {
                    method: 'DELETE'
                });

                const result = await response.json();
                
                if (result.success) {
                    alert('删除成功');
                    loadData(); // 重新加载数据
                } else {
                    alert('删除失败：' + result.message);
                }
            } catch (error) {
                console.error('删除失败:', error);
                alert('删除失败，请检查网络连接');
            }
        }

        // 搜索待审核内容
        function searchPending() {
            const keyword = document.getElementById('pending-search').value.toLowerCase();
            const filtered = currentData.pending.filter(item => 
                item.content.toLowerCase().includes(keyword) ||
                item.submitter.toLowerCase().includes(keyword)
            );
            renderPendingList(filtered);
        }

        // 搜索已通过内容
        function searchApproved() {
            const keyword = document.getElementById('approved-search').value.toLowerCase();
            const filtered = currentData.approved.filter(item => 
                item.content.toLowerCase().includes(keyword) ||
                item.submitter.toLowerCase().includes(keyword)
            );
            renderApprovedList(filtered);
        }

        // 格式化时间
        function formatTime(timeString) {
            const date = new Date(timeString);
            return date.toLocaleString('zh-CN');
        }

        // 点击模态框外部关闭
        window.onclick = function(event) {
            const modal = document.getElementById('editModal');
            if (event.target === modal) {
                closeEditModal();
            }
        }
    </script>
</body>
</html> 